<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 添加视口元标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>四象限任务管理器</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>四象限任务管理 <i class="fas fa-tasks"></i></h1>
    </header>
    
    <!-- 新增的弹框内容 -->
    <div id="saveModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <div class="import-export-buttons">
                <input type="file" id="importFile" accept=".json" style="display: none;">
                <button onclick="document.getElementById('importFile').click()">导入数据</button>
                <button onclick="exportData()">导出数据</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="quadrant" id="quadrant2">
            <div class="quadrant-header">
                <h2><i class="fas fa-calendar-alt"></i> 第二象限 - 重要不紧急</h2>
                <i class="info-icon fas fa-info-circle" onclick="showTooltip(2)"></i>
            </div>
            <div class="quadrant-description">规划时间完成</div>
            <ul id="list2"></ul>
            <div class="input-container">
                <input type="text" id="input2" placeholder="添加新任务">
                <button onclick="addTask(2)">添加</button>
            </div>
        </div>

        <div class="quadrant" id="quadrant1">
            <div class="quadrant-header">
                <h2><i class="fas fa-exclamation-circle"></i> 第一象限 - 既重要又紧急</h2>
                <i class="info-icon fas fa-info-circle" onclick="showTooltip(1)"></i>
            </div>
            <div class="quadrant-description">立即处理！</div>
            <ul id="list1"></ul>
            <div class="input-container">
                <input type="text" id="input1" placeholder="添加新任务">
                <button onclick="addTask(1)">添加</button>
            </div>
        </div>

        <div class="quadrant" id="quadrant3">
            <div class="quadrant-header">
                <h2><i class="fas fa-bolt"></i> 第三象限 - 不重要但紧急</h2>
                <i class="info-icon fas fa-info-circle" onclick="showTooltip(3)"></i>
            </div>
            <div class="quadrant-description">尽量委托他人</div>
            <ul id="list3"></ul>
            <div class="input-container">
                <input type="text" id="input3" placeholder="添加新任务">
                <button onclick="addTask(3)">添加</button>
            </div>
        </div>
        <div class="quadrant" id="quadrant4">
            <div class="quadrant-header">
                <h2><i class="fas fa-hourglass-end"></i> 第四象限 - 既不重要也不紧急</h2>
                <i class="info-icon fas fa-info-circle" onclick="showTooltip(4)"></i>
            </div>
            <div class="quadrant-description">考虑是否需要</div>
            <ul id="list4"></ul>
            <div class="input-container">
                <input type="text" id="input4" placeholder="添加新任务">
                <button onclick="addTask(4)">添加</button>
            </div>
        </div>
    </div>
    
    <footer>
        <button id="settingsBtn" class="footer-btn" onclick="document.getElementById('saveModal').style.display='flex'">
            <i class="fas fa-cog"></i> 设置
        </button>
        <button id="shareBtn" class="footer-btn" onclick="shareApp()">
            <i class="fas fa-share-alt"></i> 分享
        </button>
    </footer>
    
    <script src="scripts.js"></script>
</body>
</html>